<template>
    <div id="open-camera-stream">
        <el-dialog
            title="实时视频"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
            <el-table :data="itemArr" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                <el-table-column type="index" label="序号" width="55" align="center" />
                <el-table-column prop="deviceId" label="设备ID"  align="center" />
                <el-table-column prop="channelId" label="通道ID" align="center" />
                <el-table-column prop="channelCode" label="通道编码" align="center" />
                <el-table-column prop="name" label="通道名称"  align="center" />
                
                <el-table-column label="操作" align="center" >
                    <template #default="scope">
                        <el-button @click="selectStream(scope.row.hls, 'm3u8')" class="icon-e" icon="VideoPlay" size="small" text type="danger"> 播放Hls </el-button>
                        <!-- <el-button @click="selectStream(scope.row.flv, 'flv')" class="icon-e" icon="ele-Edit" size="small" text type="primary"> 播放Flv </el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="stream-part">
                <div>{{ videoOptions.src }}</div>
                <vue3VideoPlay 
                    v-if="videoOptions.src"
                    width="100%"
                    title="videoOptions.type"
                    :src="videoOptions.src"
                    :type="videoOptions.type"
                    :autoPlay="true"
                />
                <div v-else style="min-height: 300px;display: flex; justify-content: center;align-items: center;">
                    暂无播放源,请打开要播放的视频流
                </div>

            </div>
            <template #footer>
                <el-button @click="handleClose">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { ElButton, ElDialog,  } from 'element-plus'
import { GetDeviceStreamAddress } from '/@/api/its/camera'
import { OpenStreamType } from '../types/cameraType'
import { ItemType } from '/@/types/its/ItsType'

export default defineComponent( {
    name: 'open-camera-stream',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
        item: {
            type: Object as () => ItemType,
            default: null,
        }
    },
    components: {
    },
    setup(props,ctx){
        const loading = ref(false)

        const itemArr = ref<OpenStreamType[]>()

        const videoOptions = reactive({
            src: "", //视频源
            type: 'm3u8', //视频类型
        })
        
        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }


        //获取流地址
        const getDeviceStreamAddressData = async () => {
            try {
                loading.value = true
                let res: any = await GetDeviceStreamAddress({n_Id: props.item.n_Id})
                if (res && res.data) {
                    itemArr.value = res.data
                    videoOptions.src = res.data[0].hls;
                    videoOptions.type = "m3u8";
                }
            }catch(err) {
                ctx.emit('close')
            }finally {
                loading.value = false
            }
        }

        const selectStream = (streamPath: string, streamType: string) => {
            videoOptions.src = streamPath;
            videoOptions.type = streamType;
        }

        onMounted(async () => {
            await getDeviceStreamAddressData()
        })

        return {
            loading,
            handleClose,
            itemArr,
            videoOptions,
            selectStream
        }
    },
} )
</script>
<style scoped lang="scss">
#open-camera-stream{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
    .stream-part {
        width: 100%;
    }
}
</style>